<template>
	<view class="main search-mian">
		<NavigationBar title="搜索" bgColor="#fff" />
		<view class="scroll-wrapper">
			<view class="search-bar-wrap">
				<uni-search-bar :radius="100" :maxlength="20" :focus="true" cancelButton="none" @confirm="searchAction" @input="input"></uni-search-bar>
				<text class="search-label" @click="searchAction">搜索</text>
			</view>
			<view class="search-keyword-wrap">
				<view class="search-keyword-title">
					<text class="title">历史搜索</text>
					<text class="iconfont delete-icon">&#xe604;</text>
				</view>
				<view class="search-keyword-content">
					<text class="keyword-item" v-for="(item,index) in 20" :key="index" @click="clickAction">关键词 - {{index}}</text>
				</view>
			</view>
			<view class="search-keyword-wrap">
				<view class="search-keyword-title">
					<text class="title">热门搜索</text>
				</view>
				<view class="search-keyword-content">
					<text class="keyword-item" v-for="(item,index) in 20" :key="index">关键词 - {{index}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
    import Vue from 'vue';
	import util from '@/static/js/util'
	export default Vue.extend({
		data() {
			return {
				searchValue: ''
			}
		},
		onLoad(option:any) {
			const me:any = this
			let query = me.$route
			console.log(option,query)

		},
		methods: {
			clickAction() {
				util.jumpPage('/pages/goodsList/goodsList?id=123')
			},
			input(e:any) {
				this.searchValue = e
			},
			searchAction() {
				console.log('=======',this.searchValue)
				uni.showToast({
					title: this.searchValue || '请输入搜索关键词',
					icon: 'none'
				})
			}
		}
	});
</script>

<style lang="scss">
	@import "./search.scss";  
</style>